<template>
  <div id="odmap" class="odmap">
    <div id="menuLeft">
      <div id="step1">
        <h5>数据选择:</h5>
        <el-cascader
            ref="getSelectData"
            placeholder="请选择需要渲染的数据"
            :options="options"
            @change="handleSelectChange"
            filterable>
        </el-cascader>
      </div>
      <div id="step2" >
        <h5>选择飞线图渲染方式:</h5>
        <el-button @click="odFlowAnalysis" >OD流量分析</el-button>
      </div>
    </div>
<!--<i class="el-icon-set-up" style="z-index: 9999; color:red; position: absolute;top: 40px;left: 12px;"></i>-->
    <!--左视图-->
    <div class="leftmap">
      <div id="entirelab">整体OD流向图</div>
      <div ref="leftmap" id="entireOD"></div>
    </div>
    <!--用于将左右两个视图隔开-->
    <div class="middlemap"></div>
    <!--右视图-->
    <div class="rightmap">
      <div id="partlab">局部OD流向图</div>
      <div ref="rightmap" id="partOD"></div>
    </div>
  </div>
</template>

<script>
//导包
import echarts from 'echarts'
import 'echarts-gl'
import 'echarts/extension/bmap/bmap'

export default {
  name: "ODFlyLine",
  data() {
    return {
      //左视图地图容器
      leftmap:null,
      //右视图地图容器
      rightmap:null,
      // 百度地图个性化模板,也就是让百度地图底图为黑色,删除了一些其他图层标注
      mapStyle: {
        styleJson: [{
          "featureType": "land",
          "elementType": "geometry",
          "stylers": {
            "color": "#070d22ff"
          }
        }, {
          "featureType": "manmade",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "manmade",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "subwaystation",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "education",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "education",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "scenicspots",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "scenicspots",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "medical",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "medical",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "water",
          "elementType": "geometry",
          "stylers": {
            "color": "#113549ff",
            "visibility": "on"
          }
        }, {
          "featureType": "green",
          "elementType": "geometry",
          "stylers": {
            "color": "#123a4bff",
            "visibility": "off"
          }
        }, {
          "featureType": "entertainment",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "shopping",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "transportation",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "playground",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "road",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "road",
          "elementType": "geometry.fill",
          "stylers": {
            "color": "#202f4aff"
          }
        }, {
          "featureType": "road",
          "elementType": "geometry",
          "stylers": {
            "weight": 1.2
          }
        }, {
          "featureType": "road",
          "elementType": "geometry.stroke",
          "stylers": {
            "color": "#3a507700"
          }
        }, {
          "featureType": "poilabel",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "poilabel",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "arterial",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "nationalwaysign",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "nationalwaysign",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "highwaysign",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "highwaysign",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "building",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "subwaylabel",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "provincialwaysign",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "scenicspotslabel",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "tertiarywaysign",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "tertiarywaysign",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "town",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "town",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "city",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "water",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "estate",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "railway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "village",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "district",
          "elementType": "labels.text.fill",
          "stylers": {
            "color": "#d1c7c7ff",
            "weight": 30
          }
        }, {
          "featureType": "district",
          "elementType": "labels.text.stroke",
          "stylers": {
            "color": "#ffffff00",
            "weight": 0
          }
        }, {
          "featureType": "city",
          "elementType": "labels.text.stroke",
          "stylers": {
            "color": "#ffffff00",
            "weight": 0
          }
        }, {
          "featureType": "city",
          "elementType": "labels.text.fill",
          "stylers": {
            "color": "#cabebeff"
          }
        }, {
          "featureType": "subwaylabel",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "roadarrow",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "footbridge",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "crosswalk",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "underpass",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "parkingspace",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "local",
          "elementType": "labels",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "local",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "on",
            "weight": 1.2
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "labels",
          "stylers": {
            "visibility": "on"
          }
        }, {
          "featureType": "fourlevelway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "13"
          }
        }, {
          "featureType": "fourlevelway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "14"
          }
        }, {
          "featureType": "fourlevelway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "15"
          }
        }, {
          "featureType": "fourlevelway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "16"
          }
        }, {
          "featureType": "fourlevelway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "17"
          }
        }, {
          "featureType": "fourlevelway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "18"
          }
        }, {
          "featureType": "fourlevelway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "19"
          }
        }, {
          "featureType": "fourlevelway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "20"
          }
        }, {
          "featureType": "fourlevelway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "21"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "13"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "14"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "15"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "16"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "17"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "18"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "19"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "20"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "21"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "13"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "14"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "15"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "16"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "17"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "18"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "19"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "20"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "21"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "13"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "14"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "15"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "16"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "17"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "18"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "19"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "20"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "21"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "13"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "14"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "15"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "16"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "17"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "18"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "19"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "20"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "13,21",
            "level": "21"
          }
        }, {
          "featureType": "arterial",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "11"
          }
        }, {
          "featureType": "arterial",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "12"
          }
        }, {
          "featureType": "arterial",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "13"
          }
        }, {
          "featureType": "arterial",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "14"
          }
        }, {
          "featureType": "arterial",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "15"
          }
        }, {
          "featureType": "arterial",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "16"
          }
        }, {
          "featureType": "arterial",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "17"
          }
        }, {
          "featureType": "arterial",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "18"
          }
        }, {
          "featureType": "arterial",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "19"
          }
        }, {
          "featureType": "arterial",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "20"
          }
        }, {
          "featureType": "arterial",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "21"
          }
        }, {
          "featureType": "arterial",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "11"
          }
        }, {
          "featureType": "arterial",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "12"
          }
        }, {
          "featureType": "arterial",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "13"
          }
        }, {
          "featureType": "arterial",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "14"
          }
        }, {
          "featureType": "arterial",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "15"
          }
        }, {
          "featureType": "arterial",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "16"
          }
        }, {
          "featureType": "arterial",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "17"
          }
        }, {
          "featureType": "arterial",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "18"
          }
        }, {
          "featureType": "arterial",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "19"
          }
        }, {
          "featureType": "arterial",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "20"
          }
        }, {
          "featureType": "arterial",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "21"
          }
        }, {
          "featureType": "arterial",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "11"
          }
        }, {
          "featureType": "arterial",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "12"
          }
        }, {
          "featureType": "arterial",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "13"
          }
        }, {
          "featureType": "arterial",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "14"
          }
        }, {
          "featureType": "arterial",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "15"
          }
        }, {
          "featureType": "arterial",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "16"
          }
        }, {
          "featureType": "arterial",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "17"
          }
        }, {
          "featureType": "arterial",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "18"
          }
        }, {
          "featureType": "arterial",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "19"
          }
        }, {
          "featureType": "arterial",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "20"
          }
        }, {
          "featureType": "arterial",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "11,21",
            "level": "21"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "on",
            "weight": 1.2
          }
        }, {
          "featureType": "provincialway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "12"
          }
        }, {
          "featureType": "provincialway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "13"
          }
        }, {
          "featureType": "provincialway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "14"
          }
        }, {
          "featureType": "provincialway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "15"
          }
        }, {
          "featureType": "provincialway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "16"
          }
        }, {
          "featureType": "provincialway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "17"
          }
        }, {
          "featureType": "provincialway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "18"
          }
        }, {
          "featureType": "provincialway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "19"
          }
        }, {
          "featureType": "provincialway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "20"
          }
        }, {
          "featureType": "provincialway",
          "stylers": {
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "21"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "12"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "13"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "14"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "15"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "16"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "17"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "18"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "19"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "20"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "21"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "12"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "13"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "14"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "15"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "16"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "17"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "18"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "19"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "20"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "labels",
          "stylers": {
            "visibility": "off",
            "curZoomRegionId": "0",
            "curZoomRegion": "12,21",
            "level": "21"
          }
        }, {
          "featureType": "nationalway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "on",
            "weight": 1.2
          }
        }, {
          "featureType": "highway",
          "elementType": "geometry",
          "stylers": {
            "visibility": "on",
            "weight": 1.2
          }
        }, {
          "featureType": "transportationlabel",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "road",
          "elementType": "labels.text.stroke",
          "stylers": {
            "color": "#ffffff00",
            "weight": 0
          }
        }, {
          "featureType": "highway",
          "elementType": "geometry.stroke",
          "stylers": {
            "color": "#ffffff00"
          }
        }, {
          "featureType": "nationalway",
          "elementType": "geometry.stroke",
          "stylers": {
            "color": "#ffffff00"
          }
        }, {
          "featureType": "provincialway",
          "elementType": "geometry.stroke",
          "stylers": {
            "color": "#ffffff00"
          }
        }, {
          "featureType": "cityhighway",
          "elementType": "geometry.stroke",
          "stylers": {
            "color": "#ffffff00"
          }
        }, {
          "featureType": "arterial",
          "elementType": "geometry.stroke",
          "stylers": {
            "color": "#ffffff00"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "geometry.stroke",
          "stylers": {
            "color": "#ffffff00"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "geometry.stroke",
          "stylers": {
            "color": "#ffffff00"
          }
        }, {
          "featureType": "fourlevelway",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "local",
          "elementType": "labels.icon",
          "stylers": {
            "visibility": "off"
          }
        }, {
          "featureType": "arterial",
          "elementType": "labels.text.stroke",
          "stylers": {
            "weight": 0.2
          }
        }, {
          "featureType": "cityhighway",
          "elementType": "labels.text.stroke",
          "stylers": {
            "weight": 0.2
          }
        }, {
          "featureType": "provincialway",
          "elementType": "labels.text.stroke",
          "stylers": {
            "weight": 0.2
          }
        }, {
          "featureType": "nationalway",
          "elementType": "labels.text.stroke",
          "stylers": {
            "weight": 0.4
          }
        }, {
          "featureType": "highway",
          "elementType": "labels.text.stroke",
          "stylers": {
            "weight": 0.2
          }
        }, {
          "featureType": "cityhighway",
          "elementType": "geometry",
          "stylers": {
            "weight": 1.2,
            "visibility": "on"
          }
        }, {
          "featureType": "arterial",
          "elementType": "geometry",
          "stylers": {
            "weight": 1.2,
            "visibility": "on"
          }
        }, {
          "featureType": "tertiaryway",
          "elementType": "geometry",
          "stylers": {
            "weight": 1.2,
            "visibility": "on"
          }
        }]
      },
      //下拉框选项
      options: this.$store.state.dataLineOD,
      //用于存储一个总的数据(没有整合过的数据)
      odLinedata:[],
      //全局OD流向图的数据
      odData:[],
      //有没有对象可以存储很多的数组类型？这14个变量稍微显得臃肿
      odData_dongcheng:[],
      odData_xicheng:[],
      odData_chaoyang:[],
      odData_changping:[],
      odData_daxing:[],
      odData_fangshan:[],
      odData_fengtai:[],
      odData_haidian:[],
      odData_huairou:[],
      odData_mentougou:[],
      odData_shijingshan:[],
      odData_shunyi:[],
      odData_tongzhou:[],
      odData_yanqing:[],
      //下拉框数据
      downSelectData: ''
    };
  },
  computed: {},
  beforeCreate() {
    //两个方法都是传值给vuex的mutation改变state
    this.$store.commit('loadMenuDataLineOD')
  },
  mounted () {
    this.initLeftmap();
  },
  methods: {
    //左视图初始化
    initLeftmap() {
      this.leftmap = this.$echarts.init(this.$refs.leftmap)
      this.leftmap.setOption({
        bmap: {
          center: [116.4, 39.95],
          zoom: 11,
          roam: true,
        },
      })
      this.leftmap.getModel().getComponent('bmap').getBMap().setMapStyle(this.mapStyle)
      this.initRightMap();

    },
    //右视图初始化
    initRightMap() {
      this.rightmap = this.$echarts.init(this.$refs.rightmap)
      this.rightmap.setOption({
        bmap: {
          center: [116.4, 39.95],
          zoom: 11,
          roam: true,
        }, //bmap
      })
      this.rightmap.getModel().getComponent('bmap').getBMap().setMapStyle(this.mapStyle)
    },

    //获取下拉框的选择
    handleSelectChange(val){
      let downSelectData = this.$refs.getSelectData.getCheckedNodes()
      this.downSelectData = downSelectData[0].data.value
    },
    //获取数据
    odFlowAnalysis(){
      this.request.get("/lineData/clickOD",
          {
            params:{
              downSelectData: this.downSelectData,
            }
          }).then(res => {
        //清空数据
            this.odData_dongcheng=[],
            this.odData_xicheng=[],
            this.odData_chaoyang=[],
            this.odData_changping=[],
            this.odData_daxing=[],
            this.odData_fangshan=[],
            this.odData_fengtai=[],
            this.odData_haidian=[],
            this.odData_huairou=[],
            this.odData_mentougou=[],
            this.odData_shijingshan=[],
            this.odData_shunyi=[],
            this.odData_tongzhou=[],
            this.odData_yanqing=[],
            // 存储后端传来的数据，是一整个表的数据
            this.odLinedata = res.data

        //适用于局部OD流向图（右视图），对数据按照14个区筛选
        for (let i = 0; i < this.odLinedata.length; i++) {
          //整体OD流向图所需要的数据
          this.odData.push({
            coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
          })

          //局部OD流向图所需要的数据
          if(this.odLinedata[i].name === 'dongcheng'){
            //填充数据
            this.odData_dongcheng.push({
              //添加od数据
              coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
            })
          }
          else if(this.odLinedata[i].name === 'xicheng'){
            this.odData_xicheng.push({
              coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
            })
          }
          else if(this.odLinedata[i].name === 'chaoyang'){
            this.odData_chaoyang.push({
              coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
            })
          }
          else if(this.odLinedata[i].name === 'changping'){
            this.odData_changping.push({
              coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
            })
          }
          else if(this.odLinedata[i].name === 'daxing'){
            this.odData_daxing.push({
              coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
            })
          }
          else if(this.odLinedata[i].name === 'fangshan'){
            this.odData_fangshan.push({
              coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
            })
          }
          else if(this.odLinedata[i].name === 'fengtai'){
            this.odData_fengtai.push({
              coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
            })
          }
          else if(this.odLinedata[i].name === 'haidian'){
            this.odData_haidian.push({
              coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
            })
          }
          else if(this.odLinedata[i].name === 'huairou'){
            this.odData_huairou.push({
              coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
            })
          }
          else if(this.odLinedata[i].name === 'mentougou'){
            this.odData_mentougou.push({
              coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
            })
          }
          else if(this.odLinedata[i].name === 'shijingshan'){
            this.odData_shijingshan.push({
              coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
            })
          }
          else if(this.odLinedata[i].name === 'shunyi'){
            this.odData_shunyi.push({
              coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
            })
          }
          else if(this.odLinedata[i].name === 'tongzhou'){
            this.odData_tongzhou.push({
              coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
            })
          }
          else if(this.odLinedata[i].name === 'yanqing'){
            this.odData_yanqing.push({
              coords:[[this.odLinedata[i].olng,this.odLinedata[i].olat],[this.odLinedata[i].dlng,this.odLinedata[i].dlat]]
            })
          }
        }
        this.getLeftMap()
        this.getRightMap()
      })
    },

    //获取百度地图服务(整体OD流向图)
    getLeftMap() {
      let option= {
        baseOption : {
          // 地图飞线样式选项
          series: [
            {
              name:'Taxi',  //名称
              type: 'lines',    //线图
              coordinateSystem: 'bmap',
              //进式渲染时每一帧绘制图形数量，设为 0 时不启用渐进式渲染，支持每个系列单独配置。
              //1e6代表 10的16次方
              progressive:1e6,
              //'lighter' 也是比较常见的一种混合模式，该模式下图形数量集中的区域会颜色叠加成高亮度的颜色（白色）
              blendMode: 'lighter',
              hoverAnimation: false,
              zlevel: 3,
              effect: {
                show: true,
                constantSpeed: 30,
                trailLength: 0.6, //特效尾迹长度[0,1]值越大，尾迹越长重
                trailWidth: 1,
                symbolSize: 1.5, //图标大小
              },
              postEffect: {
                enable: true
              },
              lineStyle: {
                normal: {
                  width: 0.2, //线条宽度
                  opacity: 0.2, //尾迹线条透明度
                  color: 'rgb(0, 38, 70,1)' // 100% 处的颜色
                  //curveness: .3 //尾迹线条曲直度
                },
              },
              data:this.odData
            }],
        },
        options:[
          //{series: [{data: this.odLinedata}]},

          {series: [{data: this.odData_dongcheng}]},
          {series: [{data: this.odData_xicheng}]},
          {series: [{data: this.odData_chaoyang}]},
          {series: [{data: this.odData_changping}]},
          {series: [{data: this.odData_daxing}]},
          {series: [{data: this.odData_fangshan}]},
          {series: [{data: this.odData_fengtai}]},
          {series: [{data: this.odData_haidian}]},
          {series: [{data: this.odData_huairou}]},
          {series: [{data: this.odData_mentougou}]},
          {series: [{data: this.odData_shijingshan}]},
          {series: [{data: this.odData_shunyi}]},
          {series: [{data: this.odData_tongzhou}]},
          {series: [{data: this.odData_yanqing}]}
        ]
      }
      this.leftmap = echarts.init(this.$refs.leftmap)
      this.leftmap.setOption(option) // 获取到的百度地图对象bmap适用于所有的百度地图的接口
      //let bmap = this.rightmap.getModel().getComponent('bmap').getBMap()
    },
    //局部OD流向图
    getRightMap() {
      let option= {
        baseOption : {
          // 地图飞线样式选项
          series: [
            {
              name:'Taxi',  //名称
              type: 'lines',    //线图
              coordinateSystem: 'bmap',
              //进式渲染时每一帧绘制图形数量，设为 0 时不启用渐进式渲染，支持每个系列单独配置。
              //1e6代表 10的16次方
              progressive:1e6,
              //'lighter' 也是比较常见的一种混合模式，该模式下图形数量集中的区域会颜色叠加成高亮度的颜色（白色）
              blendMode: 'lighter',
              hoverAnimation: false,
              zlevel: 3,
              effect: {
                show: true,
                constantSpeed: 30,
                //period: 3, //箭头指向速度，值越小速度越快
                trailLength: 0.6, //特效尾迹长度[0,1]值越大，尾迹越长重
                trailWidth: 1,
                //trailOpacity: 0.5,
                //symbol: 'arrow', //箭头图标
                symbolSize: 1.5, //图标大小
              },
              postEffect: {
                enable: true
              },
              lineStyle: {
                normal: {
                  width: 0.2, //线条宽度
                  opacity: 0.2, //尾迹线条透明度
                  color: 'rgb(0, 38, 70,1)' // 100% 处的颜色
                  //curveness: .3 //尾迹线条曲直度
                },
              },
              data:this.odData
            }],
          //时间轴开发参考案例 https://echarts.apache.org/zh/option.html#timeline
          timeline: {
            //类目轴，适用于离散的类目数据
            axisType: 'category',
            autoPlay: true,
            //表示播放的速度（跳动的间隔），单位毫秒（ms）
            playInterval: 10000,
            //timeline组件离容器下侧的距离。
            bottom:'45px',
            //时间轴上节点之间的连线的颜色
            lineStyle:{
              color:'#6495ed',
              shadowColor:'#a9a9a9',
              labelColor:'#c0c0c0'
            },
            //每一个节点的备注颜色（东城区、西城区字体颜色）
            label:{
              normal:{color:"#fffdd0"},
              emphasis:{color:"#fffdd0"}
            },
            //时间轴上每一个节点的颜色
            itemStyle:{
              normal:{
                color:'#00008b',
                shadowColor:'#a9a9a9',
              },
              emphasis:{
                color:'#ffebcd'
              }
            },
            //当前项『高亮状态』的样式（hover时）,也就是时间轴上的当前节点颜色
            checkpointStyle:{
              color:'#6495ed',
              borderColor:'#ffebcd',
              borderWidth:1
            },
            //『控制按钮』的样式。『控制按钮』包括：『播放按钮』、『前进按钮』、『后退按钮』。
            controlStyle:{
              normal:{
                color:'#6495ed',
                borderColor:'#6495ed'
              },
              emphasis:{
                color:'#4b0082',
                borderColor:'#ffebcd'
              }
            },
            data: ['东城区', '西城区','朝阳区','昌平区','大兴区','房山区','丰台区','海淀区','怀柔区','门头沟区','石景山区','顺义区','通州区','延庆区'],
            //zlevel: 4,
          },
        },
        options:[
          {series: [{data: this.odData_dongcheng}]},
          {series: [{data: this.odData_xicheng}]},
          {series: [{data: this.odData_chaoyang}]},
          {series: [{data: this.odData_changping}]},
          {series: [{data: this.odData_daxing}]},
          {series: [{data: this.odData_fangshan}]},
          {series: [{data: this.odData_fengtai}]},
          {series: [{data: this.odData_haidian}]},
          {series: [{data: this.odData_huairou}]},
          {series: [{data: this.odData_mentougou}]},
          {series: [{data: this.odData_shijingshan}]},
          {series: [{data: this.odData_shunyi}]},
          {series: [{data: this.odData_tongzhou}]},
          {series: [{data: this.odData_yanqing}]}
        ]
      }
      this.rightmap = echarts.init(this.$refs.rightmap)
      this.rightmap.setOption(option) // 获取到的百度地图对象bmap适用于所有的百度地图的接口
    }
  }
}
</script>

<style>

html, body, #odmap{
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#odmap{
  position: relative;
  height:100%;
  width:100%;
}

.leftmap{
  height: 100%;
  float:left;
  width: 49%;
  /*width: 0%;*/
  margin: 0;
  padding: 0;
  background-color: #bfc;
}

.middlemap {
  float:left;
  width: 0.1%;
  height: 100%;
  background-color: #113097;
}

.rightmap {
  height: 100%;
  float:left;
  width: 50.9%;
  margin: 0;
  padding: 0;
  background-color: #00CCFF;
}

#entirelab{
  position: absolute;
  font-weight: 500;
  color:  orange;
  font-size: 20px;
  margin-left: 16%;
  margin-top: 0.5%;
  z-index:600;
}

#partlab{
  position: absolute;
  z-index:600;
  font-weight: 500;
  color: orange;
  font-size: 20px;
  margin-left: 17%;
  margin-top: 0.5%
}

#entireOD{
  width: 100%;
  height: 100%;
}

#partOD{
  width: 100%;
  height: 100%;
}

#menuLeft {
  position: absolute;
  top: 40px;
  left: 12px;
  width: 21%;
  height: 21%;
  z-index: 100;
  font-size: 20px;
  font-weight: 700;
  color: white;
  background-color: rgba(49, 51, 53, 0.7);
  background-image: url("../../assets/image/public_resource/border_new1.png");
  background-size: 100% 100%;
  /*opacity: 0.8;*/
  border-radius: 20px;
  overflow: auto;
}

#menuLeft h5{
  margin-bottom: 10px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
}

#step1{
  margin-left: 45px;
}

#step2{
  margin-left: 45px;
}

</style>